import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

Item {
    id: loginForm
    width: parent.width
    height: parent.height
    
    property alias usernameField: usernameField
    property alias passwordField: passwordField
    property alias loginButton: loginButton
    property alias rememberCheckbox: rememberCheckbox
    property alias forgotPasswordText: forgotPasswordText
    
    Rectangle {
        id: background
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#f6f6f6" }
            GradientStop { position: 1.0; color: "#e0e0e0" }
        }
    }
    
    ColumnLayout {
        id: mainLayout
        width: Math.min(parent.width * 0.8, 400)
        spacing: 20
        anchors.centerIn: parent
        
        // Logo/Title area
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 100
            color: "transparent"
            
            Text {
                id: titleText
                text: qsTr("Welcome")
                font.pixelSize: 36
                font.weight: Font.Light
                color: Material.primary
                anchors.centerIn: parent
            }
        }
        
        // Form area with card effect
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: formLayout.height + 40
            radius: 4
            color: "white"
            
            // Shadow effect
            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 0
                verticalOffset: 2
                radius: 8.0
                samples: 17
                color: "#30000000"
            }
            
            ColumnLayout {
                id: formLayout
                width: parent.width - 40
                anchors.centerIn: parent
                spacing: 16
                
                // Username field
                TextField {
                    id: usernameField
                    Layout.fillWidth: true
                    placeholderText: qsTr("Username")
                    leftPadding: 30
                    
                    background: Rectangle {
                        implicitWidth: 200
                        implicitHeight: 40
                        radius: 4
                        color: usernameField.activeFocus ? "#f5f5f5" : "white"
                        border.color: usernameField.activeFocus ? Material.accent : "#e0e0e0"
                    }
                    
                    Text {
                        text: "\uf007" // Font Awesome user icon
                        font.family: "FontAwesome"
                        font.pixelSize: 16
                        color: Material.accent
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                
                // Password field
                TextField {
                    id: passwordField
                    Layout.fillWidth: true
                    placeholderText: qsTr("Password")
                    echoMode: TextInput.Password
                    leftPadding: 30
                    
                    background: Rectangle {
                        implicitWidth: 200
                        implicitHeight: 40
                        radius: 4
                        color: passwordField.activeFocus ? "#f5f5f5" : "white"
                        border.color: passwordField.activeFocus ? Material.accent : "#e0e0e0"
                    }
                    
                    Text {
                        text: "\uf023" // Font Awesome lock icon
                        font.family: "FontAwesome"
                        font.pixelSize: 16
                        color: Material.accent
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
                
                // Remember me and forgot password row
                RowLayout {
                    Layout.fillWidth: true
                    
                    CheckBox {
                        id: rememberCheckbox
                        text: qsTr("Remember me")
                    }
                    
                    Item { Layout.fillWidth: true }
                    
                    Text {
                        id: forgotPasswordText
                        text: qsTr("Forgot password?")
                        color: Material.accent
                        
                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                console.log("Forgot password clicked")
                            }
                        }
                    }
                }
                
                // Login button
                Button {
                    id: loginButton
                    text: qsTr("LOGIN")
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50
                    Material.background: Material.primary
                    Material.foreground: "white"
                    font.bold: true
                    
                    contentItem: Text {
                        text: loginButton.text
                        font: loginButton.font
                        opacity: enabled ? 1.0 : 0.3
                        color: loginButton.Material.foreground
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        elide: Text.ElideRight
                    }
                    
                    background: Rectangle {
                        implicitWidth: 100
                        implicitHeight: 40
                        opacity: enabled ? 1 : 0.3
                        radius: 4
                        color: loginButton.Material.background
                    }
                }
            }
        }
    }
}
